<template>
    <el-dialog title="导出报表" :visible.sync="isShow" width="500px" :lock-scroll="true" :show-close="false" append-to-body>
        <!-- 瀑布图 -->
        <div class="track1" ref="fallWave">
            <el-form>
                <el-form-item label="">
                    <el-date-picker
                        v-model="datetime"
                        type="datetimerange"
                        :picker-options="pickerOptions"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="筛选范围">
                    <el-cascader
                        placeholder="筛选范围"
                        :options="backstageData"
                        :show-all-levels="false"
                        @change="handleScopedChange"
                        :props="{ checkStrictly: true, multiple: false }"
                        clearable
                        v-model="scope_id_list"
                    />
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" size="small" @click="handleDevice">选择设备</el-button>
                </el-form-item>
                <el-form-item v-if="devices.length != 0">
                    <table class="sensor_table" border="1px solid #66B1FF">
                        <tr>
                            <th>设备id</th>
                            <th>设备名称</th>
                        </tr>
                        <tr v-for="(item, index) in devices">
                            <td>{{ item.device_id }}</td>
                            <td>{{ item.device_name }}</td>
                        </tr>
                    </table>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="exportPDF">提交</el-button>
                    <el-button @click="isShow = false">取消</el-button>

                    <el-button v-if="env" type="primary" @click="exportPDFtest">测试告警生成报告</el-button>
                </el-form-item>
            </el-form>
            <el-dialog width="30%" :visible.sync="treeShow" append-to-body :close-on-click-modal="false">
                <el-tree :data="treeData" highlight-current node-key="pid" :show-checkbox="true" :filter-node-method="filterNode" @check-change="handleCheckChange" ref="tree">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>
                            <i :class="data.icon"></i>
                            {{ node.label }}
                        </span>
                    </span>
                </el-tree>
                <div style="margin-top: 10px">
                    <el-button type="primary" size="small" @click="getCheckedKeys">确认</el-button>
                    <el-button size="small" @click="treeShow = false">取消</el-button>
                </div>
            </el-dialog>
        </div>

        <!-- <el-dialog class="pdf_view" title="pdf预览" append-to-body :visible.sync="pdfIsShow" height="100%" width="70%"
            :lock-scroll="true" :show-close="false"> -->
        <!-- 瀑布图 -->
        <!-- <div class="pdf" ref="pdf" v-if="pdfIsShow">
            <el-button @click="exportPDF" type="primary">查看报告</el-button>
        </div> -->
        <!-- </el-dialog> -->
    </el-dialog>
</template>
<script>
import { mapState } from 'vuex'
import { requestApi, fileApi } from '@/requset/api'
// import print from '@/components/Print'
export default {
    data() {
        return {
            isShow: false,
            pdfIsShow: false,
            datetime: [new Date(Date.now() - 86400000 * 30), new Date(Date.now())],
            type: null,
            scope_id_list: null,
            scopeOptions: null,
            treeShow: false,
            devices: [],
            treeData: [],
            pickerOptions: {
                shortcuts: [
                    {
                        text: '最近 1天',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24)
                            picker.$emit('pick', [start, end])
                        },
                    },
                    {
                        text: '最近 3天',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 3 * 24)
                            picker.$emit('pick', [start, end])
                        },
                    },

                    {
                        text: '最近 6天',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 6 * 24)
                            picker.$emit('pick', [start, end])
                        },
                    },
                ],
            },
        }
    },
    components: {},
    computed: {
        ...mapState('backstage', ['backstageData', 'sensorType', 'wavcacq']),
        env() {
            return process.env.NODE_ENV !== 'production'
        },
    },
    methods: {
        doOpen() {
            this.isShow = true
        },
        handleScopedChange(e) {
            this.treeData = []
        },
        handleDevice() {
            if (this.scope_id_list) var id = this.scope_id_list[this.scope_id_list.length - 1]
            else {
                this.$message.info('请先选择筛选范围')
                return
            }
            if (this.treeData.length == 0) {
                requestApi('get', `sensor/tree/getlist?id=${id}&type=device`, {}, true)
                    .then((res) => {
                        if (res.data.code == 0) {
                            this.treeData = res.data.data
                        }
                    })
                    .then(() => {
                        this.treeShow = true
                    })
            } else this.treeShow = true
        },

        getCheckedKeys() {
            this.devices = []
            const nodes = this.$refs.tree.getCheckedNodes()
            const leafNodes = nodes.filter((node) => node.children && node.checked !== false)

            nodes.forEach((e) => {
                if (e.children.length == 0)
                    this.devices.push({
                        device_name: e.label,
                        device_id: e.value,
                    })
            })
            this.treeShow = false
        },
        exportPDF() {
            let arr = []
            this.datetime.forEach((e) => {
                arr.push(this.dayjs(e).format('YYYY-MM-DD HH:mm:ss'))
            })
            fileApi(
                'post',
                'report/down/sys',
                {
                    device_ids: this.devices.map((item) => item.device_id),
                    times: arr,
                },
                true,
            )
        },
        exportPDFtest() {
            let arr = []
            this.datetime.forEach((e) => {
                arr.push(this.dayjs(e).format('YYYY-MM-DD HH:mm:ss'))
            })
            fileApi(
                'post',
                'report/down/sys',
                {
                    device_ids: [3],
                    times: arr,
                    type_: 1,
                },
                true,
            )
        },
    },
}
</script>

<style lang="less" scoped>
.track1 {
    width: 100%;
    justify-content: center;

    .pdf_view {
        margin-top: 0 !important;
        width: 80%;
    }

    .sensor_table {
        max-height: 14vh;
        border-collapse: collapse;
        width: 90%;
        margin-left: 5%;
        border: 1px solid #007bff;
        border-radius: 4px;

        th,
        td {
            padding: 8px;
            border-bottom: 1px solid #007bff;
        }

        tr {
            color: rgb(130, 187, 237) !important;
            display: flex;
            width: 100%;

            th {
                width: 200px;
                height: 24px;
                line-height: 24px;
                font-weight: bold;
            }

            th:nth-child(1),
            td:nth-child(1) {
                width: 20%;
            }

            th:nth-child(2),
            td:nth-child(2) {
                width: 80%;
            }

            td {
                height: 20px !important;
                line-height: 20px !important;
                text-align: center;
            }
        }
    }
}

.pdf {
    position: relative;

    .el-button {
        position: absolute;
        right: 0;
        top: -68px;
    }
}
</style>
